<template>
  <div class="form-subform-preview">
    <div class="form-preview-group form-subform-preview-group">
      <label>
        {{ _displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <span class="form-type-text">{{ setting.name }}</span>
      </div>
    </div>
    <div class="form-subform-preview-content">
      <form-design-preview
        v-model="subFormFieldList"
        :validate="validate"
        :is-show-design-preview-cover="false"
        :parent-field-id="field.fieldName"
        :show-form-design-tip="false"
        :disabled="isDisabledPreview"
        @dragValChange="dragValChange"
      />
      <div class="form-subform-preview-placeholder" v-if="!isDisabledPreview">{{ $t('common.form.preview.subForm.tipPlaceHolder') }}</div>
    </div>
  </div>
</template>

<script>
/* props */
import { previewProps } from '@src/component/form/components/props';
/* mixin */
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
import translate from '@src/component/form/mixin/translate.js'

export default {
  name: 'form-subform-preview',
  mixins: [FormSubFormMixin, translate],
  props: previewProps,
  inject: {
    isDisabledPreview: {
      default: false
    }
  },
  computed: {
    subFormFieldList: {
      get() {
        return this.field.subFormFieldList || this.field.setting?.subFormFieldList || [];
      },
      set(value) {
        let subFormFieldList = [
          ...value,
        ]
        this.$set(this.field, 'subFormFieldList', subFormFieldList)
      }
    }
  },
  components: {
    // 组件循环引用报错，改用import
    FormDesignPreview: () => import('@src/component/form/FormDesignPreview')
  },
};
</script>

<style lang="scss" scoped>
@import './FormSubForm.scss';
::v-deep .form-design-preview-disabled {
  border-color: #F0F0F0 !important;
}
</style>
